<template>
  <div>
    <div class="box">
      <div class="header">
        header
        <button @click="flag = !flag">点我</button>
        <button @click="goLogin">退出登录===>去Login</button>
      </div>
      <div class="main">
        <div class="left" :class="flag ? '' : 'rout'">
          <ul>
            <li><router-link to="/first">first</router-link></li>
            <li><router-link to="/second/?key=2">second</router-link></li>
            <li><router-link to="/third/3">third</router-link></li>
            <li>
              <router-link
                :to="{
                  name: 'Forth',
                  params: { ss: 4 },
                  query: { a: 4 },
                }"
                >forth</router-link
              >
            </li>
          </ul>
        </div>
        <div class="right">
          <router-view></router-view>
        </div>
      </div>
      <div class="footer">footer</div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'HomeCom',
  data () {
    return {
      flag: true
    }
  },
  created () {
  },
  computed: {
  },
  methods: {
    goLogin () {
      this.$router.push({ path: '/' })
    }
  }
}
</script>
<style lang='less'  scoped>
* {
  margin: 0;
  padding: 0;
}
.box {
  height: 100vh;
  display: flex;
  flex-direction: column;
  .header {
    background-color: skyblue;
    height: 100px;
  }
  .main {
    flex: 1;
    display: flex;

    .left {
      &.rout {
        width: 50px;
        translate: all 0.7s;
      }
      width: 100px;
      display: flex;
      ul {
        width: 100px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        li {
          flex: 1;
          border-bottom: 1px solid #000;

          a {
            display: block;
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 100px;
            background-color: pink;
            text-decoration: none;
          }
        }
      }
    }
    .right {
      flex: 1;
      background-color: brown;
    }
  }
  .footer {
    background-color: #333;
    height: 100px;
  }
}
.box .main .left ul li .router-link-exact-active {
  background-color: yellow;
}
</style>
